import React, { Component } from 'react'
import request from '../util/request'
import {Table,Button,Modal,Input} from 'antd'


  
 
export default class Main extends Component {
    state = {
        selectedRowKeys:[], //选中的id值
        data:[],          //表格的数据
        visible: false,   //控制弹窗显示隐藏
        nick_name:'',     //用户昵称
        phone:'',
        tags:'',
        role:'',
        id_card:'',
        address:'',
        info:'',
        id:''  //编辑的id
    }
    componentDidMount(){
        this.getList();
    }

    getList = () => {
        request.get('/api/list').then(res => {
            console.log(res);
            if(res.code === 1){
                this.setState({
                    data:res.data
                })
            }
        })
    }
    render() {
        const {selectedRowKeys,data,phone,nick_name,tags,role,id_card,address,info} = this.state;
        const columns = [
            {
                title: '用户昵称',
                dataIndex: 'nick_name',
            },
            {
                title: '手机号',
                dataIndex: 'phone',
            },
            {
                title: '标签',
                dataIndex: 'tags',
            },
            {
                title: '用户身份',
                dataIndex: 'role',
              },
              {
                title: '身份证',
                dataIndex: 'id_card',
              },
              {
                title: '公司地址',
                dataIndex: 'address',
              },
              {
                title: '跟进记录',
                dataIndex: 'info',
              },
              {
                title: '注册时间',
                dataIndex: 'create_time',
              },
              {
                title: '注册终端',
                dataIndex: 'end_type',
              },
              {
                  title:'操作',
                  render:(obj) => {  //当前行的数据
                      return <div>
                          <Button onClick={()=>{this.edit(obj)}}>编辑</Button>
                          {/* <Button onClick={() => {this.see(obj)}}>查看</Button> */}
                      </div>
                  }
              }
          ];
        return (
            <div>
                <Button onClick={this.showModal}>添加</Button>
                <Button onClick={this.del}>删除</Button>
               <Table rowSelection={{selectedRowKeys,onChange: this.onSelectChange}} columns={columns} dataSource={data} rowKey="id"/>
               <Modal
                    title="Basic Modal"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    >
                    用户昵称：<Input name="nick_name" value={nick_name} onChange={this.change}></Input><br/>
                    手机号：<Input name="phone" value={phone} onChange={this.change}></Input><br/>
                    标签：<Input name="tags" value={tags} onChange={this.change}></Input><br/>
                    用户身份：<Input name="role" value={role} onChange={this.change}></Input><br/>
                    身份证：<Input name="id_card" value={id_card} onChange={this.change}></Input><br/>
                    公司地址<Input name="address" value={address} onChange={this.change}></Input><br/>
                    跟进记录：<Input name="info" value={info} onChange={this.change}></Input>
                </Modal>
            </div>
        )
    }

    //编辑
    edit = (obj) => {
        //1.给input赋值
        //2.id
        //3.打开弹窗
        let {nick_name,phone,tags,role,id_card,address,info,id} = obj;
        this.setState({
            visible: true,   //控制弹窗显示隐藏
            nick_name,     //用户昵称
            phone,
            tags,
            role,
            id_card,
            address,
            info,
            id
        })
    }

    //受控表单
    change = (e) => {
        this.setState({
            [e.target.name]:e.target.value
        })
    }

    showModal = () => {
        this.setState({
            visible: true,
        });
    };
    
    //添加  编辑
    handleOk = e => {
        console.log(e);
        //调添加接口
        //1.获取数据 
        //2.容错处理
        //3.调接口
        //4.清空input的值
        //5.关闭弹窗
        //6.获取列表接口  
        let {phone,nick_name,tags,role,id_card,address,info,id} = this.state;
        let url = id?'/api/edit':'/api/add';

        if(phone&&nick_name&&tags&&role&&id_card&&address&&info){
            request.post(url,{phone,nick_name,tags,role,id_card,address,info,id}).then(res => {
                if(res.code === 1){
                    this.setState({
                        visible: false,   //控制弹窗显示隐藏
                        nick_name:'',     //用户昵称
                        phone:'',
                        tags:'',
                        role:'',
                        id_card:'',
                        address:'',
                        info:'',
                        id:''
                    },() => {
                        this.getList();
                    })
                }
            })
        }else{
            console.log("参数不全")
        }
        // this.setState({
        //     visible: false
        // });
    };

    handleCancel = e => {
        console.log(e);
        this.setState({
            visible: false,
        });
    };
    

    //复选框选中不选中时触发的函数
    onSelectChange = selectedRowKeys => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        this.setState({ selectedRowKeys });
    };

    //删除
    del = () => {
        let {selectedRowKeys} = this.state; //选中项的id组成的数组
        request.delete('/api/del',{ids:selectedRowKeys.join(',')}).then(res => {
            console.log(res);
            if(res.code === 1){
                this.getList();
            }
        })
    }
}
